<template>
  <div class="app-container">
    <el-container class="el-container" v-if="form.name">
      <el-header>
        <el-row :gutter="5">
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <span><i class="el-icon-setting"></i></span>
            <span class="sidelogotxt">&nbsp;&nbsp;全景编辑</span>
          </el-col>
          <el-col style="text-align: right" :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
            <span style="padding-right: 12px;"><el-button type="primary" @click="save()"
                                                          v-if="form.status===0">保存</el-button></span>
            <span style="padding-right: 12px;"><el-button type="success" @click="submit()"
                                                          v-if="form.status===0">提交</el-button></span>
            <span style="padding-right: 12px;"><el-button type="danger" @click="reset()"
                                                          v-if="form.status > 2">重置</el-button></span>
            <span><el-button type="success" @click="show()" v-if="form.status > 2">进入场馆</el-button></span>
          </el-col>

        </el-row>
      </el-header>
      <el-container>
        <el-aside width="300px" class="el-aside">
          <div style=" width: 100%; height: 100%; text-align: center;">
            <div style="height: 700px; text-align: center;">
              <el-steps direction="vertical" :active="form.status" finish-status="success" style="padding: 10%">
                <el-step title="准备资料" description="填写表单并上传相关资料"></el-step>
                <el-step title="场馆生成" description="进入全景图渲染任务队列等待处理"></el-step>
                <el-step :title="processResult.desp" description="任务处理结果"></el-step>
              </el-steps>
            </div>
          </div>

        </el-aside>
        <el-container>
          <el-main class="el-main">
            <el-row>
              <el-col :span="16" class="card-box">
                <el-card>
                  <div slot="header"><span>操作说明</span></div>
                  <div class="el-table el-table--enable-row-hover el-table--medium" style="height: 300px;">
                    <div style="text-align:left; font-size: 14px; margin-bottom: 18px;">
                      <b>1、基本流程：</b>
                      <li>请您在该平台填写全景图的基本信息，并上传相关的资料。 然后点击提交。</li>
                      <li>提交成功后系统将您提交的资料处理并放如全景图渲染任务队列中等待执行。</li>
                      <li>任务执行完成后您可以点击右上角的“进入场馆”按钮查看您的场馆全景图。</li>
                    </div>
                    <div style="text-align:left; font-size: 14px; margin-bottom: 18px;">
                      <b>2、填写说明：</b>基本信息请根据实际需求填写。其中模板一栏，系统了若干模板供你选择。
                      <li>图片信息是最重要的信息，您可以直接上传图片，也可以打包一起上传，可以传多个，建议打包后上传。<span
                        style="color: #e24329">单个上传文件最大不超过50M</span></li>
                      <li>音频接受mp3格式的，您也可以打包上传，可以传多个。<span style="color: #e24329">单个上传文件最大不超过50M</span></li>
                      <li>视频接受mp4格式，您也可以打包上传，可以传多个。<span style="color: #e24329">单个上传文件最大不超过50M</span></li>
                    </div>
                    <div style="text-align:left; font-size: 14px; margin-bottom: 18px;">
                      <b>3、功能介绍：</b>
                      <li>3.1、左边的步骤表示设计进行的阶段，一共有三个阶段。第二个阶段是系统的任务执行阶段，可能执行时间较长，请耐心等待。</li>
                      <li>3.2、保存按钮让您在设计未完成的时候暂时保存，以便您之后继续完成；提交之前已经介绍过了，表示在用户资料填写完成上传完成时期进入下一阶段。</li>
                      “重置”表示系统将回到初始化，用户填写的资料将清空。“进入场馆”这个按钮只有在渲染任务处理完成后才会出现，点击可以进入您的场馆进行参观。
                      <li> 3.3 设计面板分为：基本信息部分、图片资料部分、音频资料部分、视频资料部分。</li>
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="8" class="card-box">
                <el-card>
                  <div slot="header"><span>基本信息</span></div>
                  <div class="el-table el-table--enable-row-hover el-table--medium" style="height: 300px;">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                      <el-form-item label="厂商名称" prop="name">
                        <el-input v-model="form.name" readonly></el-input>
                      </el-form-item>
                      <el-form-item label="场馆编号" v-if="form.domain != ''" readonly>
                        <el-input v-model="form.domain"></el-input>
                      </el-form-item>
                      <el-form-item label="展区" prop="areaId">
                        <el-select
                          v-model="form.areaId"
                          placeholder="请选择展区"
                          clearable
                          filterable
                          style="width: 100%"
                        >
                          <el-option
                            v-for="area in areaOption"
                            :key="area.key"
                            :label="area.label"
                            :value="area.key"
                          />
                        </el-select>
                      </el-form-item>

                      <el-form-item label="房间" prop="room">
                        <el-select
                          v-model="form.room"
                          placeholder="请选择房间"
                          clearable
                          style="width: 100%"
                        >
                          <el-option
                            v-for="room in roomOption"
                            :key="room.key"
                            :label="room.label"
                            :value="room.key"
                          />
                        </el-select>
                      </el-form-item>

                      <el-form-item label="模板" prop="templateId" align="left">
                        <el-select
                          v-model="form.templateId"
                          placeholder="请选择模板"
                          clearable
                          style="width: 100%"
                        >
                          <el-option
                            v-for="template in templateOption"
                            :key="template.key"
                            :label="template.key"
                            :value="template.key"
                          >
                            <span style="float: left">{{ template.key }}</span>
                            <el-button style="float: right; padding: 3px 0" type="text"
                                       @click="preview(template.value)">预览
                            </el-button>
                          </el-option>
                        </el-select>

                      </el-form-item>

                    </el-form>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="24" class="card-box">
              </el-col>

              <el-col :span="8" class="card-box">
                <el-card>
                  <div slot="header">
                    <span style="font-size: 14px;">图片信息</span>
                    <el-upload v-if="form.status ===0" name="file"
                               :headers="headers"
                               :action="picUploadUrl"
                               :show-file-list="false"
                               accept=".jpg,.png.zip"
                               :before-upload="beforeUpload"
                               :on-success="doAfterUpload" style="text-align: right">
                      <el-button style="float: right; padding: 3px 0" type="text">上传图片</el-button>
                    </el-upload>
                  </div>
                  <div class="el-table el-table--enable-row-hover el-table--medium" style="height: 300px;">
                    <el-table :data="picData" style="width: 100%" :show-header="false">
                      <el-table-column prop="fileName" label="已上传列表" align="center"></el-table-column>
                      <el-table-column label="操作" width="200" align="center"  v-if="form.status ===0">
                        <template slot-scope="scope">
                          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <el-button type="text" icon="el-icon-close" style="color: #dd6161;"
                                       @click="deleteFile(scope.row.fileName, 'pic')"></el-button>
                          </el-tooltip>

                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8" class="card-box">
                <el-card>
                  <div slot="header">
                    <span style="font-size: 14px;">音频信息</span>
                    <el-upload  v-if="form.status ===0" name="file"
                               :headers="headers"
                               :action="musicUploadUrl"
                               :show-file-list="false"
                               accept=".mp3,.zip"
                               :before-upload="beforeUpload"
                               :on-success="doAfterUpload" style="text-align: right">
                      <el-button style="float: right; padding: 3px 0" type="text">上传音频</el-button>
                    </el-upload>
                  </div>
                  <div class="el-table el-table--enable-row-hover el-table--medium" style="height: 300px;">
                    <el-table :data="musicData" style="width: 100%" :show-header="false">
                      <el-table-column prop="fileName" label="已上传列表" align="center"></el-table-column>
                      <el-table-column label="操作" width="200" align="center"  v-if="form.status ===0">
                        <template slot-scope="scope">
                          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <el-button type="text" icon="el-icon-close" style="color: #dd6161;"
                                       @click="deleteFile(scope.row.fileName, 'music')"></el-button>
                          </el-tooltip>

                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="8" class="card-box">
                <el-card>
                  <div slot="header">
                    <span style="font-size: 14px;">视频信息</span>
                    <el-upload  v-if="form.status ===0" name="file"
                               :headers="headers"
                               :action="videoUploadUrl"
                               :show-file-list="false"
                               accept=".mp4,.zip"
                               :before-upload="beforeUpload"
                               :on-success="doAfterUpload" style="text-align: right">
                      <el-button style="float: right; padding: 3px 0" type="text">上传视频</el-button>
                    </el-upload>
                  </div>
                  <div class="el-table el-table--enable-row-hover el-table--medium" style="height: 300px;">
                    <el-table :data="videoData" style="width: 100%" :show-header="false">
                      <el-table-column prop="fileName" label="已上传列表" align="center"></el-table-column>
                      <el-table-column label="操作" width="200" align="center"  v-if="form.status ===0">
                        <template slot-scope="scope">
                          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <el-button type="text" icon="el-icon-close" style="color: #dd6161;"
                                       @click="deleteFile(scope.row.fileName, 'video')"></el-button>
                          </el-tooltip>

                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>

            </el-row>

          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>

	import {getFormInfo, list, deleteFile, deployByFileURL, save, submit, reset, getTemplates} from "@/api";

	const STATUS_PREPARE = 0; //准备资料中
	const STATUS_PROCESS = 1; //全景生成处理中
	const STATUS_DONE = 3;    //生成结果

	export default {
		name: 'Design',
		data() {
			return {

				form: {
					domain: '',
					name: '',
					areaId: '',
					room: '',
					templateId: '',
					status: 0
				},

				headers: {},
				// 上传URL
				picUploadUrl: "",
				musicUploadUrl: "",
				videoUploadUrl: "",

				//已经上传列表
				picData: [],
				musicData: [],
				videoData: [],

				areaOption: [
					{key: "tradition_energy", label: "传统能源展区"},
					{key: "new_material", label: "新材料展区"},
					{key: "green_energy", label: "绿色能源展区"},
					{key: "energy_technology_innovation", label: "能源科技创新展区"},
					{key: "new_energy_consumption", label: "新能源消费展区"},
					{key: "new_energy", label: "新能源展区"},
					{key: "electric_power", label: "电力展区"},
					{key: "natural_gas", label: "天然气展区"},
					{key: "regional_cooperation", label: "区域合作展区"},
					{key: "international_exchange", label: "国际交流展区"},
				],

				roomOption: [
					{key: "big", label: "大"},
					{key: "normal", label: "中"},
					{key: "small", label: "小"},
				],

				templateOption: [],

				// 表单校验
				rules: {
					areaId: [
						{required: true, message: "请选择展区", trigger: "blur"}
					],
					room: [
						{required: true, message: "请选择房间", trigger: "blur"}
					],
					templateId: [
						{required: true, message: "请选择模板", trigger: "blur"}
					]
				},

				//待保存标识
				toSaveFlag: false,
				//接口请求状态
				uploadLoading: undefined,
				//场馆生成结果
				processResult: {success: true, desp: '处理结果'}
			};
		},

		created: function () {
			// this.processResult = {success: true, desp: '生成成功'}
			console.info(this.$route.query.name);
			this.form.name = this.$route.query.name;
			if (!this.form.name) {
				this.$message.error("用户名称不能为空");
				return;
			}
			this.picUploadUrl = deployByFileURL + "pic/" + this.form.name;
			this.musicUploadUrl = deployByFileURL + "music/" + this.form.name;
			this.videoUploadUrl = deployByFileURL + "video/" + this.form.name;
			this.initForm();
			//初始化上传数据
			this.initList();
			getTemplates().then(res => this.templateOption = res.data);
		},

		mounted: function () {

		},

		methods: {

			//进入场馆
			show() {
				window.open(this.form.url);
			},

			//预览
			preview(url) {
				window.open(url);
			},

			resetForm() {
				let name = this.form.name;
				this.form = {
					name: '',
					domain: '',
					areaId: '',
					room: '',
					templateId: '',
					status: 0
				};
				this.form.name = name;
			},

			initForm() {
				this.resetForm();
				getFormInfo(this.form.name).then(res => {
					if (res.data) {
						this.form = Object.assign({}, res.data);
					}
				})
			},

			async initList() {
				let res = await list('music', this.form.name);
				this.musicData = res.data;
				res = await list('video', this.form.name);
				this.videoData = res.data;
				res = await list('pic', this.form.name);
				this.picData = res.data;
			},

			//保存
			save() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						save(this.form).then(() =>
							this.$message.success("保存成功")
						);
					}
				});
			},

			submit() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						this.$confirm('确认要提交吗?', "警告", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}).then(() => {
							this.form.status = 1;
							return submit(this.form);
						}).then(() =>
							this.$message.success("提交成功")
						);
					}
				});

			},

			reset() {
				this.$confirm('重置将清空所有数据，确定执行么?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					return reset(this.form.name);
				}).then(async () => {
						await this.initForm();
						await this.initList();
						this.$message.success("重置成功");
					}
				);
			},

			//删除上传文件
			deleteFile(fileName, type) {
				this.$confirm('确认要删除吗?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					return deleteFile(fileName, type, this.form.name);
				}).then(async () => {
						this.$message.success("删除成功");
						await this.initList();
					}
				);
			},

			beforeUpload(file) {
				this.uploadLoading = this.$loading({
					lock: true,
					text: `文件${file.name}上传中......`,
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
			},
			/**  上传回调事件 */
			doAfterUpload(res, file) {
				console.info(res);
				console.info(file);
				this.uploadLoading.close();
				this.$message.success("上传成功");
				location.reload();
			}
		},

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

  @import '../assets/css/iconfont.css';
  @import '../assets/css/Editor.scss';


  #pano {
    width: 100%;
    height: 100%;
  }

  .sidelogo {
    position: absolute;
    top: 10px;
    left: 70px;
    height: 50px;
    line-height: 50px;
  }

  .sidelogotxt {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: left;
    line-height: 60px;
  }

  .el-aside {
    /*background-color: #D3DCE6;*/
    color: #333;
    text-align: center;
    line-height: 100%;
    height: 880px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    padding: 3px;
  }

  .el-container {
    padding-top: 0;
    min-height: 880px;
    overflow-y: hidden;
  }


  .el-card__header {
    padding: 14px 15px 7px;
    min-height: 40px;
  }

  .el-card__body {
    padding: 15px 20px 20px 20px;
  }

  .card-box {
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 10px;
  }

</style>
